<html>
<head>
<%@ page import="com.arsl.*" %>   
<title>Augmented Reality - Sri Lanka News</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<style type="text/css">@import "css/jquery.datepick.css";</style> 
<style>
label.lbl{
text-align:left;
width:80px;
float:left;
}

.field{
width:150px;
}

#btnGenQr{
float:left;
}

#divSelectPaper{
width:300 px;
height:100%;
float:left;
}

#divShowImg{
width:300 px;
height:100%;
float:right;
}

#main,#wrap,#header,#footer{
width:605px;
}

#wrap{
height:200px;
}
#btnNext{
float:right;
width:100 px;
}

#imgQr{
margin-left:auto;
margin-right:auto;
}

#footer{
clear:both;
top-margin:5 px;
}

fieldset.hidden{
border:none;
}

</style>
<script type="text/javascript" src="js/jquery.datepick.js"></script>
<script >
$(function() {
	$('#popupDatepicker').datepick();
	loadPapers();
});

function generate(){
var dateReg = /^\d{2}[./-]\d{2}[./-]\d{4}$/
if(!$('#popupDatepicker').val().match(dateReg)){
alert("Incorrect date");
return;
}
if(isNaN($('#txtPageNo').val())){
alert("Please enter a valid page number");
return;
}
var dateObj=$( "#popupDatepicker" ).datepick( 'getDate' )[0];
var month = dateObj.getUTCMonth()+1;
var day = dateObj.getUTCDate();
var year = dateObj.getUTCFullYear();
$.get("http://localhost:8080/arsl/services?service=addPublication&paperId="+$("#cmbPapers :selected").val()+"&year="+year+"&month="+month+"&day="+day+"&edition=dummy",function(data){
	var pubId=$.parseJSON(data);
	
	$.get("http://localhost:8080/arsl/services?service=addARPage&publicationId="+pubId+"&pageNo="+$('#txtPageNo').val(),function(data2){
		var jsonRet=$.parseJSON(data2);
		var arPageId=jsonRet[1];
		$('#imgQr').attr('src',"http://localhost:8080/arsl/services?service=getQRCode&arPageId="+arPageId);
		$('#btnNext').attr('disabled', false);		
		});
	});
}

function loadPapers(){
	$.get("http://localhost:8080/arsl/services?service=getPapers&pubId=1",function(data){
		var jData=$.parseJSON(data);
		var mySelect = $('#cmbPapers');
		$.each(jData, function(index, item) {
			mySelect.append(
				$('<option></option>').val(item.id).html(item.name)
			);
		});
		
	});
}
</script>
</head>
<body>
<div id=main>
	<div id=header>
	</div>
	<div id=wrap>
		<div id="divSelectPaper">
			<fieldset>
			<legend>Select Page</legend>
			   <p><label class="lbl">Paper:</label><select class="field" id="cmbPapers"></select></p>
			   <p><label class="lbl">Date:</label><input class="field" type="text" id="popupDatepicker"></p>
			   <p><label class="lbl">Page No:</label><input class="field" type="text" id="txtPageNo"></p>
			   <button id="btnGenQr" onclick="generate()">Generate AR Enabled Page...</button>
			</fieldset>
		</div>
		<div id="divShowImg">
			<fieldset>
			<legend>QR Code for the page</legend>
			   <img id ="imgQr" height="165" width="165">
			</fieldset>
		</div>
	</div>
	<div id="footer">
	<p><fieldset class="hidden"><form action="tagPage.jsp"><button id="btnNext" disabled>Next</button></fieldset><form></p>
	</div>
</div>
</body>
</html>
